<template>
  <div class="app-container">
    <el-watermark
      :content="['Liwen-左左√', '']"
      :gap="[200, 350]"
      :width="200"
      :height="100"
      :font="font"
    >
      <el-row :gutter="20">
        <!--用户数据-->
        <el-col :span="24" :xs="24">
          <el-form
            :model="queryParams"
            ref="queryRef"
            :inline="true"
            @submit.prevent
          >
            <el-form-item label="" prop="keys">
              <el-input
                placeholder="请输入模块，taskId，需求名称"
                v-model="queryParams.keys"
                style="width: 250px; height: 35px"
                @change="handleQuery()"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleEdit()"
                v-hasPermi="['tk:task:add']"
                >新增
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="success"
                plain
                icon="Edit"
                :disabled="single"
                @click="handleEdit()"
                v-hasPermi="['tk:task:edit']"
                >修改
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                plain
                icon="Delete"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPermi="['tk:task:remove']"
                >删除
              </el-button>
            </el-form-item>
          </el-form>

          <el-table
            border
            v-loading="loading"
            :data="list"
            @selection-change="handleSelectionChange"
            ref="tableRef"
          >
            <el-table-column type="selection" width="50" align="center" />
            <!-- <el-table-column label="序号" width="50px" type="index" /> -->
            <!-- <el-table-column
              label="taskId"
              prop="taskId"
              width="100px"
              :show-overflow-tooltip="true"
            >
              <template #default="scope">
                <a @click="handelTask(scope.row.taskId)">{{
                  scope.row.taskId
                }}</a>
              </template>
            </el-table-column> -->
            <el-table-column
              label="需求名称"
              prop="taskName"
              width="120px"
              fixed
              :show-overflow-tooltip="true"
            >
              <template #default="scope">
                <a @click="handelTask(scope.row.taskId)">{{
                  scope.row.taskName
                }}</a>
              </template>
            </el-table-column>
            <el-table-column
              label="模块"
              prop="modelName"
              width="80px"
              :show-overflow-tooltip="true"
              fixed
            />
            <el-table-column
              label="用例名称"
              prop="caseName"
              width="200px"
              fixed
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="总条数"
              prop="caseTotal"
              width="80px"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="执行状态"
              prop="caseStatus"
              width="80px"
              :show-overflow-tooltip="true"
            >
              <template #default="scope">
                <el-tag
                  effect="dark"
                  size="large"
                  type="info"
                  v-if="scope.row.caseStatus == 0"
                  style="width: 80%"
                >
                  未执行
                </el-tag>
                <el-tag
                  effect="dark"
                  size="large"
                  type="primary"
                  v-else-if="scope.row.caseStatus == 1"
                  style="width: 80%"
                >
                  执行中
                </el-tag>
                <el-tag
                  effect="dark"
                  size="large"
                  type="primary"
                  v-else-if="scope.row.caseStatus == 2"
                  style="width: 80%"
                >
                  执行成功
                </el-tag>
                <el-tag
                  effect="dark"
                  size="large"
                  type="danger"
                  v-else
                  style="width: 80%"
                >
                  执行失败
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column
              label="创建人"
              prop="createBy"
              width="100px"
              :show-overflow-tooltip="true"
            >
            </el-table-column>
            <el-table-column
              label="创建时间"
              prop="createTime"
              width="170px"
              :show-overflow-tooltip="true"
            />

            <el-table-column
              label="修改人"
              prop="updateBy"
              width="100px"
              :show-overflow-tooltip="true"
            />

            <el-table-column
              label="修改时间"
              prop="updateTime"
              width="170px"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="备注"
              prop="remark"
              :show-overflow-tooltip="true"
            />
            <el-table-column
              label="操作"
              align="center"
              width="150"
              class-name="small-padding fixed-width"
            >
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  @click="openCaseInfo(scope.row)"
                  v-hasPermi="['tk:case:info:list']"
                  >详情</el-button
                >
                <el-button link type="primary" @click="caseExecute(scope.row)"
                  >执行</el-button
                >
                <el-button
                  link
                  type="primary"
                  @click="openCaseResult(scope.row)"
                  v-hasPermi="['tk:case:result:list']"
                  >结果</el-button
                >
                <!-- <router-link to="case/info">详情</router-link> -->
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="total > 0"
            :total="total"
            v-model:page="queryParams.pageNum"
            v-model:limit="queryParams.pageSize"
            @pagination="reload()"
          />
        </el-col>
      </el-row>
      <!-- 编辑 -->
      <AddEditForm
        v-model:visible="isShowEditForm"
        v-if="isShowEditForm"
        :data="current"
        @done="reload"
      />
      <!-- 执行测试用例 -->
      <CaseExecute
        v-model:visible="isExecuteVisible"
        v-if="isExecuteVisible"
        :data="current"
        @done="reload"
      />
    </el-watermark>
  </div>
</template>

<script setup name="kf">
import { tkTaskCaseApi } from "@/api/kernel/tk-task-case.js";
import AddEditForm from "./add-edit-form.vue";
import { h, ref } from "vue";
import { ElMessageBox, ElMessage } from "element-plus";
import CaseExecute from "../case_execute/index.vue";

import { useRouter } from "vue-router";
const router = useRouter();

//#- 编辑
const font = reactive({
  // color: "rgba(224,255,255,1)",
  color: "#87cefa",
  fontSize: 18,
});
const tableRef = ref(null);

const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  keys: "",
});
const total = ref(0);
const loading = ref(true);

const { proxy } = getCurrentInstance();

const list = ref([]);
const single = ref(true);
const multiple = ref(true);

const reload = () => {
  current.value = null;
  tkTaskCaseApi
    .getPageList(proxy.addDateRange(queryParams.value))
    .then((res) => {
      list.value = res.rows;
      total.value = res.total;
      loading.value = false;
    });
};
//# 搜索
const handleQuery = () => {
  queryParams.value.pageNum = 1;
  reload();
};
//#- 重置
const resetQuery = () => {
  queryParams.value.pageNum = 1;
  queryParams.value.keys = "";
  queryParams.value.input = "";

  reload();
};
const current = ref(null);
//#- 多选
const ids = ref([]);
const selectionList = ref([]);
const handleSelectionChange = (selection) => {
  selectionList.value = selection;
  single.value = selection.length != 1;
  if (selection.length == 1) {
    selection.map(function (item, i) {
      current.value = item;
    });
  }
  multiple.value = !selection.length;
};
//#- 编辑
const isShowEditForm = ref(false);

const handleEdit = () => {
  isShowEditForm.value = true;
};
//#- 删除
const handleDelete = () => {
  ids.value = selectionList.value.map((item) => item.id);
  let title = selectionList.value.map((item) => {
    return item.taskName;
  });
  ElMessageBox({
    title: `Message`,
    message: h("p", null, [
      h("span", null, "确认要删除 "),
      h("span", { style: "color: red" }, `${title}`),
    ]),
    showCancelButton: true,
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
  })
    .then(({ value }) => {
      tkTaskCaseApi.remove(ids.value).then((res) => {});
      setTimeout(() => {
        ElMessage({
          type: "success",
          message: `删除成功！`,
        });
        reload();
      }, 1000);
    })
    .catch(() => {
      tableRef.value.clearSelection();
    });
};

onMounted(() => {
  reload();
});

//# 跳转需求连接
const handelTask = (taskId) => {
  let url = `http://project.gmfcloud.com/${taskId}`;
  window.open(url, "_blank");
};
//# 用例详情
const openCaseInfo = (row) => {
  const url = router.resolve({
    path: "case_info",
    query: {
      id: row.id,
    },
  });
  window.open(url.href, "_blank");
};
//# 测试结果
const openCaseResult = (row) => {
  const url = router.resolve({
    path: "case_result",
    query: {
      id: row.id,
    },
  });
  window.open(url.href, "_blank");
};
//# 执行测试用例
const isExecuteVisible = ref(false);
const caseExecute = (row) => {
  current.value = row;
  isExecuteVisible.value = true;
};
</script>
<style>
.winClass {
  width: 100%;
}
</style>
